<template>
    <div>

        <mt-swipe :auto="4000">
          <mt-swipe-item>1</mt-swipe-item>
          <mt-swipe-item>2</mt-swipe-item>
          <mt-swipe-item>3</mt-swipe-item>
       </mt-swipe>

       <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">农业资讯</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">五级人才库</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">农广风景</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">日志上报</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">数据查询</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">留言反馈</div></a></li>
		           
		        </ul> 

                <div class="mui-card" style="margin-bottom: 35px;">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-right" src="../../images/cbd.jpg">
							<div class="mui-media-body">
								木屋
								<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-right" src="../../images/yuantiao.jpg">
							<div class="mui-media-body">
								CBD
								<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
							</div>
						</a>
					</li>
					
				</ul>
			</div>
		</div>


      
    </div>
</template>

<script>

 import {Toast} from 'mint-ui'
  export default{
      
      data(){

          return {

              lunbotuList: []
          };
      },

      created(){

          this.getLunboTu();
      },
      methods:{

          getLunboTu(){

              this.$http.get('http://vue.study.io/api/getlunbo').then(result=>{

                   if(result.body.status===0){
                          Toast('加载轮播图失败！！');

                   }else{

                        Toast('加载轮播图失败！！');
                   }

               },errorR=>{

                   Toast('服务器资源无法访问！');
               })
          }
      }


  }
</script>


<style lang="scss" scoped>
.mint-swipe{

    height: 200px;
    .mint-swipe-item{

        &:nth-child(1){
        background-color: red;
        }
         &:nth-child(2){
        background-color: blue;
        }
         &:nth-child(3){
        background-color: yellow;
        }
    }
}



.mui-grid-view.mui-grid-9{
background-color: white;
border: none;

}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {

    border: none;
}
</style>